<template>
  <div class="navbar-div">
    <van-nav-bar
      title="购物车"
      :right-text="isEdit ? '完成' : '编辑'"
      fixed
      @click-right="handleToEditCart"
    />
  </div>

  <!--购物车列表-->
  <div class="cart-list" v-if="cartInfo.length > 0">
    <template v-for="(item, index) in cartInfo" :key="index">
      <van-card
        :num="item.count"
        :price="item.price"
        :title="item.Name"
        :thumb="item.image"
      >
        <template #tag>
          <van-checkbox v-model="item.checked" />
        </template>
      </van-card>
    </template>
  </div>

  <!-- 空购物车 -->
  <van-empty description="购物车空空如也~" v-else>
    <van-button round type="danger" class="bottom-button" @click="handleToShoppingMall">去逛逛吧</van-button>
  </van-empty>

  <!-- 提交订单 -->
  <van-submit-bar
    v-if="!isEdit"
    :price="totalMoney"
    button-text="提交订单"
    @submit="onSubmit"
    style="bottom: 60px"
  >
    <van-checkbox v-model="allChecked">全选</van-checkbox>
  </van-submit-bar>
  <van-submit-bar
    v-else
    button-text="删除"
    @submit="handleToRemoveCart"
    style="bottom: 60px"
  >
    <van-checkbox v-model="allChecked" style="width: 100%">全选</van-checkbox>
  </van-submit-bar>
</template>
<script>
import { computed, defineComponent, ref, watch } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { toMoney } from '../filter/moneyFilter'
export default defineComponent({
  setup() {
    const cartInfo = computed(() => store.getters.cartInfo)
    const isEmpty = computed(() => !!store.getters.cartInfo.length)
    const store = useStore()
    const clearCart = () => {
      store.dispatch('cart/clearCart')
    }
    const moneyFilter = (money) => {
      return toMoney(money)
    }
    const totalMoney = computed(() => {
      let allMoney = 0
      cartInfo.value.forEach((item) => {
        if (item.checked) {
          allMoney += item.price * item.count
        }
      })
      return allMoney * 100
    })
    const allChecked = ref(false)
    watch(allChecked, (value) => {
      cartInfo.value.map((item) => {
        item.checked = value
      })
    })
    const onSubmit = () => {}
    const isEdit = ref(false)
    const handleToEditCart = () => {
      isEdit.value = !isEdit.value
    }
    const handleToRemoveCart = () => {
      let removeGoodsList = cartInfo.value.filter((item) => {
        return item.checked === true
      })
      if (removeGoodsList.length > 0) {
        removeGoodsList.forEach((item) => {
          store.dispatch('cart/removeGoodsFormCart', item.goodsId)
        })
      }
    }
    const router = useRouter()
    const handleToShoppingMall = () =>{
      router.push('/')
    }
    return {
      cartInfo,
      isEmpty,
      clearCart,
      moneyFilter,
      totalMoney,
      allChecked,
      onSubmit,
      handleToEditCart,
      isEdit,
      handleToRemoveCart,
      handleToShoppingMall
    }
  }
})
</script>
<style lang="scss" scoped>
.cart-list {
  margin-top: 46px;
  margin-bottom: 110px;
  background-color: #fff;
}
</style>